<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- vue样式 -->
    <link rel="stylesheet" href="vue.css">
    <!-- vue js -->
    <script src="vue.js"></script>
    <!-- element-plus js -->
    <script src="element-plus.js"></script>
    <!-- icon -->
    <script src="element-plus-icon.js"></script>
    <!-- 数据库 indexeddb -->
    <script src="dexie.js"></script>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="elindex.css">
</head>

<body>


    <div id="app">



        <el-container>



            <el-header class="flex-cc">
                <span>
                    银河电脑YHDN ERP
                </span>
            </el-header>

            <el-main>
                <el-card>

                    <!-- 工具栏 -->
                    <template #header>

                        <el-row justify="end">
                            <el-button icon="DocumentAdd" @click="addRow" :disabled="isEditing">添加数据</el-button>
                            <el-button icon="document">提交数据</el-button>
                            <el-button icon="plus" type="primary" @click="showDialog">商品录入</el-button>
                            <el-button icon="printer" type="primary">打印数据</el-button>
                        </el-row>
                    </template>

                    <!-- 表格区 -->
                    <el-table :data="productList">

                        <el-table-column label="行号" width="80">

                            <template #default="{$index}">

                                {{ $index+1 }}

                            </template>

                        </el-table-column>

                        <el-table-column label="品名" width="300">

                            <template #default="{$index,row}">
                                  <el-autocomplete v-if="row.isEditing"
                                    v-model="row.name"
                                    :fetch-suggestions="querySearch"
                                    placeholder="Please input"
                                    value-key="name"
                                    id ="inputref"
                                    @select="(item)=>handleSelect(item,row)"
                                    >
                                
                                </el-autocomplete>

                                <span v-else>{{ row.name }}</span>

                            </template>

                        </el-table-column>
                        <el-table-column label="单位" width="80">

                            <template #default="{$index,row}">

                                <el-input v-if="row.isEditing" type="text" v-model="row.unit"></el-input>
                                <span v-else>{{ row.unit }}</span>

                            </template>

                        </el-table-column>
                        <el-table-column label="单价" width="150">

                            <template #default="{$index,row}">

                                <el-input v-if="row.isEditing" type="text" v-model="row.price"></el-input>
                                <span v-else>{{ row.price }}</span>

                            </template>

                        </el-table-column>
                        <el-table-column label="数量" width="150">

                            <template #default="{$index,row}">

                                <el-input v-if="row.isEditing" type="text" v-model="row.total"></el-input>
                                <span v-else>{{ row.total }}</span>

                            </template>

                        </el-table-column>
                        <el-table-column label="总价" width="150">


                            <template #default="{$index,row}">
                                <span>{{ row.total*row.price }}</span>
                            </template>

                        </el-table-column>
                        <el-table-column label="备注" width="200">

                            <template #default="{$index,row}">

                                <el-input v-if="row.isEditing" type="text" v-model="row.comment"></el-input>
                                <span v-else>{{ row.comment }}</span>

                            </template>
                        </el-table-column>

                        <el-table-column label="操作">

                            <template #default="{row}">

                                <el-button size="small" icon="edit" type="primary">编辑</el-button>
                                <el-button size="small" icon="delete" type="danger">删除</el-button>
                                <el-button size="small" icon="document" @click="saveRow(row)"
                                    type="success">保存</el-button>

                            </template>

                        </el-table-column>


                    </el-table>



                </el-card>
            </el-main>


        </el-container>

        <el-dialog v-model="addProductDialogShow">

            <template #header>

                <el-row justify="center">
                    <h1>
                        商品录入
                    </h1>
                </el-row>
            </template>

             <el-form :model="formData" style="padding: 0 150px;">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="formData.name" id="productName" />
                    </el-form-item>
                    <el-form-item label="单位" prop="unit">
                        <el-input v-model="formData.unit" />
                    </el-form-item>
                    <el-form-item label="单价" prop="price">
                        <el-input v-model="formData.price" />
                    </el-form-item>
                    <el-form-item label="别称" prop="alias">
                        <el-input v-model="formData.alias" />
                    </el-form-item>
                    <el-form-item label="备注" prop="comment">
                        <el-input v-model="formData.comment" />
                    </el-form-item>
                </el-form>

                <template #footer>

                        <div>
                            <el-button type="primary" @click="addProduct">确定</el-button>
                            <el-button type="danger" @click="addProductDialogShow=false">退出</el-button>
                        </div>

                </template>

        </el-dialog>

    </div>


    <script src="elindex.js"></script>



</body>

</html>